<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="tabList"
      :pagination="false"
    >
      <!-- //备注 -->
      <div slot="remark" slot-scope="text, record">
        {{
          record.remark === null || record.remark === ""
            ? "暂无"
            : record.remark
        }}
      </div>
      <!-- 、、创建时间 -->
      <div slot="createTime" slot-scope="text, record">
        {{
          record.createTime === null || record.createTime === ""
            ? "暂无"
            : record.createTime.replace("T", " ")
        }}
      </div>
      <!-- 状态 -->
      <div slot="retreatState" slot-scope="text, record">
        <span
          :style="
            record.retreatState === '取消入库' ? 'color:red;' : 'color:#3eae7c;'
          "
        >
          {{ record.retreatState }}
        </span>
      </div>

      <!-- 操作 -->
      <span slot="action" class="action" slot-scope="text, record">
        <a
          v-if="port === 'clientSide' && (tabKey === '76' || tabKey === '96')"
          class="action"
          @click="editRow(record, 'editcClientSide', 'edit')"
          >编辑</a
        >
        <a
          v-if="port === 'systemEdit' && tabKey === '76'"
          class="action"
          @click="editRow(record, 'systemEdit', 'info')"
          >审核</a
        >
        <a-divider
          type="vertical"
          v-if="port === 'clientSide' && (tabKey === '76' || tabKey === '96')"
        />
        <a
          v-if="port === 'clientSide' && (tabKey === '76' || tabKey === '96')"
          @click="delRow(record)"
          class="action"
          style="color: red; border-bottom: 1px solid red"
          >删除</a
        >
        <a
          v-if="port === 'clientSide' && (tabKey === '86' || tabKey === '106')"
          class="action"
          @click="editRow(record, 'editcClientSide', 'info')"
          >详情</a
        >
        <a
          v-if="port === 'systemEdit' && tabKey != '76'"
          class="action"
          @click="editRow(record, 'systemEdit', 'info')"
          >详情</a
        >
      </span>
    </a-table>
  </div>
</template>

<script>
import {
  by_retreatApply_Info,
  by_retreatApply_del,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
export default {
  props: ["tabList", "getTableList", "getCountList", "port", "tabKey"],
  data() {
    return {};
  },
  methods: {
    async delRow(record) {
      let _this = this;
      this.$confirm({
        title: `确定要删除推荐编号为${record.applyCode}的订单吗?`,
        okText: "确定",
        cancelText: "取消",
        onOk() {
          return new Promise((resolve) => {
            setTimeout(async () => {
              let { code } = await by_retreatApply_del(record.id);
              if (code === "10000") {
                _this.getCountList();
                _this.getTableList();
                resolve();
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    async editRow(record, flag, show) {
      let { code, responseBody } = await by_retreatApply_Info(record.id);
      if (code === "200") {
        setTimeout(() => {
          this.$bus.$emit("PreEntryModal", responseBody, flag, show);
        }, 1);
      }
    },
  },
  computed: {
    columns() {
      if (this.port === "clientSide") {
        return [
          {
            title: "预报编号",
 
            dataIndex: "applyCode",
            key: "applyCode",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "预报标题",
            dataIndex: "title",
            key: "title",

            scopedSlots: { customRender: "title" },
            align: "center",
          },

          {
            title: "退至仓库",
            dataIndex: "warehousingName",
            key: "warehousingName",

            //  scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
            // ellipsis: true,
          },
          {
            title: "退件处理",
            dataIndex: "typeName",
            key: "typeName",
    
            align: "center",
          },
          // {
          //   title: "SKU总数",
          //   dataIndex: "productSumNumber",
          //   key: "productSumNumber",
          //   width: "10%",
          //   // scopedSlots: { customRender: "productSumNumber" },
          //   align: "center",
          // },
          // {
          //   title: "总箱数",
          //   dataIndex: "packingSumNumber",
          //   key: "packingSumNumber",
          //   width: "10%",
          //   //   width: "12%",
          //   // scopedSlots: { customRender: "packingSumNumber" },
          //   align: "center",
          // },

          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            // width: '6%',
   
            scopedSlots: { customRender: "createTime" },
            align: "center",
          },
          {
            title: "备注",
            dataIndex: "remark",
            key: "remark",
            // width: '6%',
      
            scopedSlots: { customRender: "remark" },
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "retreatState",
            key: "retreatState",
            scopedSlots: { customRender: "retreatState" },
            // width: '6%',
      
            align: "center",
          },
          {
            title: "操作",
            key: "operation",

            // width: '%',
       
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ];
      } else {
        return [
          {
            title: "客户编号",
            dataIndex: "tenantId",
            key: "tenantId",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "预报编号",
            dataIndex: "applyCode",
            key: "applyCode",
            // scopedSlots: { customRender: "key" },
            align: "center",
          },
          {
            title: "预报标题",
            dataIndex: "title",
            key: "title",
            scopedSlots: { customRender: "title" },
            align: "center",
          },

          {
            title: "退至仓库",
            dataIndex: "warehousingName",
            key: "warehousingName",
            //  scopedSlots: { customRender: "logisticsInfos" },
            align: "center",
            // ellipsis: true,
          },
          {
            title: "退件处理",
            dataIndex: "typeName",
            key: "typeName",
            align: "center",
          },
          // {
          //   title: "SKU总数",
          //   dataIndex: "productSumNumber",
          //   key: "productSumNumber",
          //   scopedSlots: { customRender: "productSumNumber" },
          //   align: "center",
          // },
          // {
          //   title: "总箱数",
          //   dataIndex: "packingSumNumber",
          //   key: "packingSumNumber",
          //   //   width: "12%",
          //   scopedSlots: { customRender: "packingSumNumber" },
          //   align: "center",
          // },

          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            scopedSlots: { customRender: "createTime" },
            align: "center",
          },
          {
            title: "备注",
            dataIndex: "remark",
            key: "remark",
            scopedSlots: { customRender: "remark" },
            align: "center",
          },
          {
            title: "状态",
            dataIndex: "retreatState",
            key: "retreatState",
            scopedSlots: { customRender: "retreatState" },
            align: "center",
          },
          {
            title: "操作",
            key: "operation",
            fixed: "right",
            scopedSlots: { customRender: "action" },
            align: "center",
          },
        ];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.logisticsInfos {
  display: flex;
  justify-content: space-around;
  margin: 5px 0;
  span {
    flex: 1;
  }
  span:nth-child(1) {
    border-radius: 5px;
    background: #027db4;
    color: #fff;
    flex: 0.5;
  }
  span:nth-child(2) {
    color: #027db4;
    text-decoration: underline;
    flex: 1;
  }
}
.action {
  a {
    border-bottom: 1px solid rgb(41, 41, 224);
    color: rgb(41, 41, 224);
  }
}
</style>